<template>
  <div class="app-container">
    <div class="filter-container">
      <div style="float: right;">
        <el-button icon="el-icon-refresh" circle @click="handleFilterQuery" />
      </div>
    </div>

    <el-table
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-bottom: 20px;"
      scrollbar-always-on="true"
    >
      <el-table-column label="序号" type="index" width="50px" align="center" />
      <el-table-column
        align="left"
        prop="taskName"
        label="节点名称"
      />
      <el-table-column
        align="left"
        prop="startTime"
        label="开始时间"
        width="140px"
      />
      <el-table-column
        align="left"
        prop="endTime"
        label="结束时间"
        width="140px"
      />
      <el-table-column
        align="left"
        prop="duration"
        label="持续时间（ms）"
      />
      <el-table-column
        align="left"
        prop="userName"
        label="当前处理人"
      />
      <el-table-column
        align="left"
        prop="opType"
        label="操作类型"
        width="70px"
      >
        <template v-slot="{row}">
          <span v-if="row.opType === 'Assign'">转办</span>
          <span v-else-if="row.opType === 'Audit'">审批</span>
          <span v-else-if="row.opType === 'Claim'">领取</span>
          <span v-else-if="row.opType === 'Unclaim'">归还</span>
          <span v-else-if="row.opType === 'Delegate'">委派</span>
          <span v-else-if="row.opType === 'AddSign'">加签</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        prop="result"
        label="办理结果"
        width="70px"
      >
        <template v-slot="{row}">
          <span v-if="row.result === 'A'">通过</span>
          <span v-else-if="row.result === 'R'">拒绝</span>
          <span v-else-if="row.result === 'D'">驳回</span>
          <span v-else-if="row.result === 'W'">委托</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        prop="remark"
        label="办理信息"
        width="150px"
      />
    </el-table>

    <!-- 表格分页 -->
    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="handleInit" />
  </div>
</template>

<script>
import { handlePageList } from './api'
import Pagination from '@/components/Pagination'

export default {
  // 当前页面名称（组件）
  name: 'ProcTaskHis',
  // 引用组件
  components: { Pagination },
  directives: { },
  filters: {},
  // props属性 这里只定义了基本的，目的是防止用户传递无效的属性（如错误拼写），其他的el-select的属性会默认继承，用法一样，因为使用v-bind="$attrs"，这个会将非props定义的属性继承过来
  props: {
    param: {
      type: String,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 列表table的key
      tableKey: 0,
      // 遮罩层
      loading: true,
      // table数据对象
      list: [],
      // 总条数
      total: 0,
      // table条件查询对象
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        param: {
          procInstId: undefined
        }
      }
    }
  },
  computed: {},
  watch: {
    param: {
      immediate: true,
      handler(newVal) {
        this.listQuery.param.procInstId = newVal
        this.handleInit()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleInit() {
      this.loading = true
      handlePageList(this.listQuery).then(res => {
        this.list = res.data
        if (res.total) {
          this.total = Number(res.total)
        }
        this.loading = false
      })
    },
    // 条件查询table数据
    handleFilterQuery() {
      this.listQuery.pageNum = 1
      this.handleInit()
    }
  }
}
</script>
